<template>
  <div class="org">
    <el-form ref="form" :model="form" label-width="80px" class="form">
      <div class="keyword">
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" @keyup.enter.native="onSubmit" placeholder="请输入名字/手机号/证件号关键字进行搜索"></el-input>
        </el-form-item>
				<el-form-item label="专属链接" v-show="showInput">
				  <el-input v-model="link" placeholder="请点击操作中的'复制机构专属链接'" readonly></el-input>
				</el-form-item>
      </div>
      <div class="state">
        <el-form-item label="状态">
          <el-select v-model="form.state" @change="onSubmit" placeholder="未审核">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="未通过" value="2"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="search">
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </div>
    </el-form>
    <div class="line"></div>
    <div class="orgTable">
      <el-table :data="tableData" stripe style="width: 80%">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="user_id" label="USER_ID" width="100">
        </el-table-column>
        <el-table-column prop="club_name" label="机构名称" width="150">
        </el-table-column>
        <el-table-column prop="major" label="负责人" width="80">
        </el-table-column>
        <el-table-column prop="major_phone" label="联系方式" width="120">
        </el-table-column>
        <el-table-column prop="salt" label="密码" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="" label="状态" width="80">
          <template slot-scope="scope">
            <span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 0">未审核</span>
            <span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 1">已通过</span>
            <span :class="{'ogg':scope.row.status == 0,'green':scope.row.status == 1,'red':scope.row.status == 2}" v-if="scope.row.status == 2">未通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0" class="operation" @click="check(scope.$index, scope.row)">审核</span>
            <span v-if="scope.row.status == 1" class="operation"><span @click="operation(scope.$index, scope.row)">机构信息</span> | <span @click="checkMatch(scope.$index, scope.row)">查看所办赛事</span></span>
            <span v-if="scope.row.status == 2" class="operation" @click="operation(scope.$index, scope.row)">机构信息</span>
						<span class="operation copy-btn-MoreDisplay" @click="copyMoreDisplayLink(scope.$index, scope.row)" :data-clipboard-text="copyMoreDisplayUrl(scope.$index, scope.row)">| 复制机构专属链接</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 20%;">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  data() {
    return {
      form: {
        keyword: '',
        state: '',
      },
			link:'',
			showInput:false,
      tableData: [],
      total: null,
      currentPage: '',
    }
  },
  created() {
    this.get_allclub()
  },
  methods: {
    onSubmit() {
      this.get_allclub()
    },
		// 复制链接
		copyMoreDisplayUrl(index,row) {
		    let url = 'http://www.tissys.com/mobile/#/match?club_id='+row.id;
		    return url;
		},
		copyMoreDisplayLink(index,row) {
			this.link = 'http://www.tissys.com/mobile/#/match?club_id='+row.id
		  const clipboard = new Clipboard('.copy-btn-MoreDisplay');
		  clipboard.on('success', e => {
		    this.$message({
		      type: 'success',
		      message: '已成功复制到剪贴板'
		    });
		    // 释放内存
		    clipboard.destroy();
		  });
		  clipboard.on('error', e => {
				this.showInput = true
		    // 不支持复制
		    this.$message({
		      type: 'error',
		      message: '您的浏览器暂不支持复制功能'
		    });
		    // 释放内存
		    clipboard.destroy();
		  });
		},
    get_allclub() {
      this.$axios.post('/UserManage/user_list', {
          search: this.form.keyword,
          type: 2,
          status: this.form.state,
          page: this.currentPage
        }, {
          headers: {
            token: window.sessionStorage.getItem('token')
          }
        })
        .then(res => {
          if (res.data.code == 2000 || res.data.code == 2001) {
            this.tableData = res.data.data.list
            this.total = res.data.data.count
          }
        })
        .catch(error => {
          console.log(error)
        });
    },
    ChangePage(page) {
      this.currentPage = page
      this.get_allclub()

    },
    check(index, row) {
      this.$router.push({ path: '/index/User/organizationCheck', query: { organizationId: row.id } })
    },
    operation(index, row){
      this.$router.push({ path: '/index/User/organizationInfo', query: { organizationId: row.id } })
    },
    checkMatch(index, row){
      this.$router.push({ path: '/index/User/organizationCheckMatch', query: { organizationId: row.id } })
    },
  }
}

</script>
<style lang="less" scoped>
.org {
  margin-top: 36px;
  .form {
    display: flex;
    margin-left: 26px;
    margin-bottom: 12px;
    .keyword {
      width: 410px;
    }
    .state {
      width: 200px;
    }
    .search {
      width: 123px;
      text-align: right;
    }
  }
  .line {
    width: 80%;
    /*height: 0.5px;*/
    border-top: 1px #dcdfe6 dotted
  }
  .orgTable {
    margin-top: 34px;
    margin-left: 40px;
  }
}

.ogg {
  color: #FF9800;
}

.green {
  color: #259B24;
}

.red {
  color: red;
}

.operation {
  color: #409EFF;
  cursor: pointer;
}

</style>
